<template>
  <div class="schedule">
    <el-row type="flex" justify="end" align="middle" class="mb10">
      <el-button size="small" type="primary" icon="el-icon-circle-plus-outline"
        >添加排班</el-button
      >
      <el-button size="small">导出订单</el-button>
    </el-row>
    <full-calendar
      class="test-fc"
      :events="fcEvents"
      first-day="1"
      locale="zh-cn"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
    >
      <!-- <template slot="fc-event-card" scope="p">
        <p>{{ p.event.title }}</p>
      </template> -->
    </full-calendar>
  </div>
</template>

<script>
let demoEvents = [
  {
    title: 'R70/T30 40S 50S AA JMF166-2',
    type: '客定',
    quantity: '30',
    cj: '五纺',
    start: '2021-10-01',
    end: '2021-10-8',
    cssClass: ['common', 'blue']
  },
  {
    title: 'R70/T30 40S 50S AA JMF166-2',
    type: '客定',
    quantity: '30',
    cj: '五纺',
    start: '2021-10-15',
    end: '2021-10-15',
    cssClass: ['common', 'yellow']
  },
  {
    title: 'JMF166-2',
    type: '客定',
    quantity: '30',
    cj: '五纺',
    start: '2021-10-15',
    end: '2021-10-16',
    cssClass: ['common', 'yellow']
  }
];
import fullCalendar from './Calendar/fullCalendar.vue';
export default {
  components: { fullCalendar },
  data() {
    return {
      // 通用
      cj: '全部',
      // 日历
      name: 'Sunny!',
      fcEvents: demoEvents
    };
  },
  methods: {
    changeMonth(start, end, current) {
      console.log(
        'changeMonth',
        start.format(),
        end.format(),
        current.format()
      );
    },
    eventClick(event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos);
    },
    dayClick(day, jsEvent) {
      console.log('dayClick', day, jsEvent);
    },
    moreClick(day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent);
    }
  }
};
</script>
